<template>
    <view class="xilu">
        <u-navbar :safeAreaInsetTop="true" bgColor="#fff" autoBack="true">
            <view class="xilu_classic_list flex-box flex-center fs32 col89" slot="center">
                <view :class="classicIndex == index?'active':''" v-for="(item,index) in classList" @click="changeList(index)">{{item}}</view>
            </view>
        </u-navbar>
        <mescroll-body ref="mescrollRef" :fixed="false" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption" :topbar="true" top="44px">
            <!--  -->
            <view class="pt30 plr30">
                <view class="flex-box pb40" v-for="(item,index) in productList">
                    <image :src="item.thumb_image_text" class="xilu_pic" mode="aspectFill"></image>
                    <view class="flex-grow-1">
                        <view class="m-ellipsis fs30 col10">{{item.name}}</view>
                        <view class="ptb10 red"><text class="fs24">¥</text>{{item.salesprice}}</view>
                        <view class="fs24 col89">{{item.scan_num}}人浏览</view>
                        <view class="flex-box pt10 flex-end">
                           <!-- <view class="btn4" @click="bindSaleStatus(index)">{{item.status==2?'下架':'上架'}}</view>
                            <view class="btn2">降价</view>
                            <view class="btn1" @click="bindEdit(item,index)">编辑</view> -->
                            <!-- <view class="btn4" @click="bindSaleStatus(index)">下架</view> -->
							<view class="btn4 mr30" v-if="item.status==0" @click="bindToggle(index,item)">编辑</view>
							<view class="btn4" @click="bindSaleStatus(index)">{{item.status==2?'下架':'上架'}}</view>
                        </view>
                    </view>
                </view>
            </view>
        </mescroll-body>
        <u-popup :show="editPop" mode="bottom" round="30" closeable closeOnClickOverlay @close="editPop = false">
            <view class="pb50">
                <view class="fs34 col3 fwb tc ptb50">操作</view>
                <view class="edit_btn mt30" @click="bindEdit()">编辑</view>
                <view class="edit_btn mt30" @click="bindDel()">删除</view>
            </view>
        </u-popup>
        <u-popup :show="downPop" mode="bottom" round="30" closeable closeOnClickOverlay @close="downPop = false">
            <view class="pb50">
                <view class="fs34 col3 fwb tc ptb50">降价</view>
                <view class="flex-box input_box plr40">
                    <view class="fs34 col10">¥</view>
                    <input type="number" v-model="price" class="flex-grow-1 pl20 fs30" placeholder-class="cola" placeholder="请输入降价价格">
                </view>
                <view class="btn1 pop" @click="bindPriceSure()">确定提交</view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    // 引入mescroll-mixins.js
    import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
    export default {
        mixins: [MescrollMixin], // 使用mixin

        data() {
            return {
                classList: ["在售", "下架"],
                classicIndex: 0,
                productList: [],
				chooseIndex:0,
				chooseProduct:null,
                editPop: false,
                downPop: false,
				price: 0,
            };
        },
        methods: {
            changeList(index) {
                this.classicIndex = index;
                this.mescroll.resetUpScroll()
            },
            /*上拉加载的回调*/
            upCallback(page) {
                // 此处可以继续请求其他接口
                let pageNum = page.num; // 页码, 默认从1开始
                let pageSize = page.size; // 页长, 默认每页10条
                this.$core.get({
                    url: 'xilumarket.recovery/mylists',
                    loading: false,
                    data: {
                        state: this.classicIndex,
                        page: pageNum,
                        pageSize: pageSize
                    },
                    success: (ret) => {
                        let data = ret.data;
                        // 接口返回的当前页数据列表 (数组)
                        let curPageData = data.data;
                        // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
                        let curPageLen = curPageData.length;
                        // 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
                        let totalPage = data.last_page;
                        // 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)

                        //设置列表数据
                        if (page.num == 1) this.productList = []; //如果是第一页需手动置空列表
                        this.productList = this.productList.concat(curPageData); //追加新数据

                        // 请求成功,隐藏加载状态
                        //方法一(推荐): 后台接口有返回列表的总页数 totalPage
                        this.mescroll.endByPage(curPageLen, totalPage);


                        setTimeout(() => {
                            this.mescroll.endSuccess(curPageLen)
                        }, 20)
                    },
                    fail: () => {
                        //  请求失败,隐藏加载状态
                        this.mescroll.endErr()
                    }
                })
            },
            
			//切换
			bindToggle(index,item){
				this.editPop = true;
				this.chooseIndex = index;
				this.chooseProduct = item;
				this.price = item.salesprice;
			},
			//编辑
			bindEdit() {
				let item = this.chooseProduct;
                let product = {
                    id: item.id,
                    name: item.name,
					city_ids: item.city_ids,
                    category_id: item.category_id,
                    content: item.content,
                    images: item.images_text,
                    salesprice: item.salesprice
                }
                uni.navigateTo({
                    url: '/pages/public_huishou/public_huishou',
                    success(res) {
                        res.eventChannel.emit('addProductTransfor', product)
                    }
                })
            },
            //删除
            bindDel() {
				let index = this.chooseIndex;
                let productList = this.productList;
                let product = productList[index];
                let page = this;
                uni.showModal({
                    title: '提示',
                    content: "是否删除",
                    success(res) {
                        if (res.confirm) {
                            page.$core.post({
                                url: 'xilumarket.recovery/del',
                                loading: false,
                                data: {
                                    product_id: product.id
                                },
                                success: (ret) => {
                                    uni.showToast({
                                        title: '删除成功',
                                        icon: 'none'
                                    })
                                    page.mescroll.resetUpScroll()
                                },
                                fail: () => {

                                }
                            })
                        }
                    }
                })

            },

            //上/下架
            bindSaleStatus(index) {
                let productList = this.productList;
                let product = productList[index];
                let status = product.status == 2 ? 0 : 2;
                let tips = status == 2 ? '是否确认上架' : '是否确认下架';
                let page = this;
                uni.showModal({
                    title: '提示',
                    content: tips,
                    success(res) {
                        if (res.confirm) {
                            page.$core.post({
                                url: 'xilumarket.recovery/multi_status',
                                loading: true,
                                data: {
                                    product_id: product.id,
                                    status: status
                                },
                                success: (ret) => {
                                    uni.showToast({
                                        title: ret.data.status == 2 ? '上架成功' : '下架成功',
                                        icon: 'none'
                                    })
                                    page.mescroll.resetUpScroll()
                                },
                                fail: () => {

                                }
                            })
                        }
                    }
                })

            },
		}
    }
</script>

<style lang="scss" scoped>
    .xilu {
        &_classic_list {
            width: 100%;
            height: 88rpx;

            view {
                margin: 0 25rpx;

                &.active {
                    font-size: 32rpx;
                    color: #101010;
                    position: relative;

                    &::after {
                        display: block;
                        content: "";
                        width: 31rpx;
                        height: 13rpx;
                        background: url(@/static/icon/index_active.png) no-repeat center;
                        background-size: 100%;
                        position: absolute;
                        bottom: -16rpx;
                        left: 0;
                        right: 0;
                        margin: auto;
                    }
                }

                &:first-child {
                    margin-left: 30rpx;
                }
            }
        }

        &_pic {
            width: 200rpx;
            height: 200rpx;
            border-radius: 10rpx;
            margin-right: 30rpx;
        }

        .btn1,
        .btn2,
        .btn4 {
            width: 130rpx;
            height: 56rpx;
            line-height: 56rpx;
            font-size: 24rpx;
        }

        .edit_btn {
            width: 650rpx;
            height: 100rpx;
            line-height: 98rpx;
            border-radius: 55rpx;
            border: 1rpx solid #EEEEEE;
            font-size: 34rpx;
            color: #101010;
            text-align: center;
            margin-left: auto;
            margin-right: auto;
        }

        .input_box {
            width: 500rpx;
            height: 100rpx;
            background: #F7F9FC;
            border-radius: 55rpx;
            margin: 0 auto 80rpx;
        }

        .btn1.pop {
            width: 650rpx;
            height: 80rpx;
            line-height: 80rpx;
            background: #FFC100;
            border-radius: 40rpx;
            margin: 10rpx auto;
            color: #101010;
            font-size: 30rpx;
        }
    }
</style>